<template>
  <div class="user-manage_page">
        <Form :model="myform" :label-width="80" inline ref="myform" :rules="ruleInline" >
        <FormItem label="名称" prop='name'>
            <Input v-model="myform.name" placeholder="Enter something..."></Input>
        </FormItem>
         <FormItem label="链接" prop="link">
            <Input v-model="myform.link" placeholder="Enter something..."></Input>
        </FormItem>
         <FormItem label="描述" prop='description'>
            <Input v-model="myform.description" placeholder="Enter something..." style="width:300px"></Input>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="handleSubmit('myform')">添加友链</Button>
            <Button  style="margin-left: 8px" @click="handleReset('myform')">重置</Button>
        </FormItem>
    </Form>
    <Table border :columns="columns" :data="data" >
        <template slot-scope="{ row }" slot="name" >
            <strong>{{ row.name }}</strong>
        </template>
        <template slot-scope="{ row, index }" slot="action">
            <Button type="primary" @click="show(index)" size="small" style="margin-right: 5px">修改</Button>
            <Button type="error" size="small" @click="remove(index)">删除</Button>
        </template>
    </Table>
    <Page :total="total" show-total @on-change='currentPage' style="margin-top:6px" :page-size="7"/>
    <Modal
        v-model="modal"
        :title="title"
        :loading="loading"
        @on-ok="asyncOK()">
        <div v-html="this.content"></div>
    </Modal>
     <div>
        <Drawer
            title="友链修改"
            v-model="value3"
            width="720"
            :mask-closable="false"
            :styles="styles"
        >
            <Form :model="formData" :rules="ruleInline1" ref="updateForm">
                <Row :gutter="32">
                    <Col span="12">
                        <FormItem label="Name" label-position="top" prop='name'>
                            <Input v-model="formData.name" placeholder="please enter user name" />
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="Url" label-position="top" prop='link'>
                            <Input v-model="formData.link" placeholder="please enter url">
                            </Input>
                        </FormItem>
                    </Col>
                </Row>
                <FormItem label="Description" label-position="top" prop='description'>
                    <Input type="textarea" v-model="formData.description" :rows="4" placeholder="please enter the description" />
                </FormItem>
            </Form>
            <div class="demo-drawer-footer">
                <Button style="margin-right: 8px" @click="value3 = false">Cancel</Button>
                <Button type="primary" @click="handleSubmit1('updateForm')" :loading='loadingf'>Submit</Button>
            </div>
        </Drawer>    
    </div>
  </div>
</template>
<script>
    export default {
        data () {
            return {
                loadingf:false,
                 value3: false,
                styles: {
                    height: 'calc(100% - 55px)',
                    overflow: 'auto',
                    paddingBottom: '53px',
                    position: 'static'
                },
                formData: {
                    name:'',
                  link:'',
                  description:'',
                  _id:''
                },
             myform:{
                  name:'',
                  link:'',
                  description:''
              },
              ruleInline: {
                    name: [
                        { required: true, message: 'Please fill in the user name', trigger: 'blur',max:10 }
                    ],
                    description: [
                        { required: true, message: 'Please fill in the user  description', trigger: 'blur',max:200 }
                    ],
                    link: [
                        { required: true, message: 'Please fill in the link.', trigger: 'blur' }
                    ]
                },
               ruleInline1: {
                    name: [
                        { required: true, message: 'Please fill in the user name', trigger: 'blur',max:10 }
                    ],
                    description: [
                        { required: true, message: 'Please fill in the user  description', trigger: 'blur',max:200 }
                    ],
                    link: [
                        { required: true, message: 'Please fill in the link.', trigger: 'blur' }
                    ]
                },
              modal: false,
              loading: true,
              content:'',
              title:'',
              index:'',
              current:0,//当前页数
              limit:7,//每页的数据
              total:10,//总数
                columns: [
                    {
                        title: '名称',
                        slot: 'name',
                        sortable: true,
                    },
                    {
                        title: '链接',
                        key: 'link'
                    },
                    {
                        title: '创建时间',
                        key: 'created_time',
                        sortable: true
                    },
                    {
                        title: '描述',
                        key: 'description',
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        width: 200,
                        align: 'center'
                    }
                ],
                data: [ ]
            }
        },
        methods: {
            asyncOK () {
                   let that = this
                  this.$axios.post('/api/manage/link/del',{_id:this.data[this.index]._id}).then(res =>{
                      setTimeout(() => {
                              this.modal = false;
                          }, 500);
                      if(res.data.err_code == 2){
                          that.$Message.error('权限不足！');
                      }else if(res.data.err_code == 1){
                          that.$Message.error('你好像被开除了！');
                      }else if(res.data.err_code == 0){
                          that.$router.push('/login')
                      }else if(res.data.err_code == 3){
                          that.$Message.success('友链删除成功！');
                          that.data.splice(that.index, 1);
                      }
                      else{
                          that.$Message.error('友链删除失败！')
                      }
                  })
            },
            show (index) {
              this.value3 = true;
              this.formData.name = this.data[index].name
              this.formData.link = this.data[index].link
              this.formData.description = this.data[index].description
              this.formData._id = this.data[index]._id
            },
            remove (index) {
                this.index = index
                this.modal = true;
                this.title = "删除友链";
                this.content = `名称:${this.data[index].name}<br>链接:${this.data[index].link}<br><p style="color:red">一旦删除，友链所有信息都会消失，不可撤销!!!</p>`
            },
            init(){
              let that = this
              this.$axios.get('/api/manage/link/get',{params:{page:this.current,limit:this.limit}}).then(res =>{
                  this.total = res.data.total;
                  if(res.data.err_code == 0){
                    that.$Message.error('查询不到链接！')
                  }else if(res.data.err_code == 1){
                    that.data = res.data.data
                  }else{
                    that.$Message.error('服务器出错！')
                  }
                  
              })
            },
            currentPage(page){
              this.current = page-1;
              this.init()
            },
            handleSubmit (name) {
                   
                this.loadingf = true
                this.$refs[name].validate((valid) => {
                    if (valid) {
                         const that = this
                         this.$axios.post('/api/manage/link/save',this.myform).then(res =>{
                             that.loadingf = false
                            if(res.data.err_code == 0){
                              that.$router.push('/login')
                            }else if(res.data.err_code == 1){
                              that.$Message.error('没查询到用户！')
                            }else if(res.data.err_code == 2){
                              that.$Message.error('权限不足！')
                            }else if(res.data.err_code == 3){
                              that.$refs.myform.resetFields();
                              that.$Message.success('友链添加成功！')
                              that.init()
                            }else if(res.data.err_code == 4){
                              that.$Message.error('参数有误！')
                            }else{
                              that.$Message.error('服务器出错！')
                            }
                          })
                    } else {
                        this.$Message.error('Fail!');
                    }
                })
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            },
            handleSubmit1 (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                         const that = this
                         this.$axios.post('/api/manage/link/edt',this.formData).then(res =>{
                            if(res.data.err_code == 0){
                              that.$router.push('/login')
                            }else if(res.data.err_code == 1){
                              that.$Message.error('没查询到用户！')
                            }else if(res.data.err_code == 2){
                              that.$Message.error('权限不足！')
                            }else if(res.data.err_code == 3){
                              that.$refs.updateForm.resetFields();
                              that.$Message.success('友链修改成功！')
                              that.value3 = false
                              that.init()
                            }else if(res.data.err_code == 4){
                              that.$Message.error('参数有误！')
                            }else{
                              that.$Message.error('服务器出错！')
                            }
                          })
                    } else {
                        this.$Message.error('Fail!');
                    }
                })
            },
             
        },
        mounted(){
          this.init()
        }
    }
</script>
<style  scoped>
     .demo-drawer-footer{
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        border-top: 1px solid #e8e8e8;
        padding: 10px 16px;
        text-align: right;
        background: #fff;
    }
</style>